<template>
  <div>
    <el-button type="primary" @click="search2Visible = true">自定义查询</el-button>
    <!-- 自定义查询 -->
    <el-dialog title="自定义查询" :visible.sync="search2Visible">
      <div class="two_form">
        <div class="two_form_f" v-for="(d, Index) in form" :key="Index">
          <div class="two_form_form_title">
            <span>第{{ Index + 1 }}组</span>
            <div>
              <span style="cursor:pointer;margin-right:10px" @click="addGroup"
                >新增组别</span
              >
              <span style="cursor:pointer" @click="deleteGroup(d)"
                >删除组别</span
              >
            </div>
          </div>
          <div class="two_form_form">
            <div>
              <el-form
                :model="i"
                :inline="true"
                v-for="(i, index) in d"
                :key="index"
                style="width:100%"
                @mouseenter.native="zhikongE(Index,index)"
                @mouseleave.native="zhikongL(Index,index)"
              >
                <el-form-item v-if="index !== 0">
                  <el-select
                    v-model.lazy="i.association"
                    placeholder=""
                    class="miniMiniInput"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.props"
                      v-for="item in ljgx"
                      :key="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-else>
                  <i
                    class="el-icon-circle-plus-outline"
                    style="width: 4vw;text-align: center;cursor:pointer;"
                    @click="addMember(d)"
                  ></i>
                </el-form-item>
                <el-form-item>
                  <el-select
                    v-model.lazy="i.dataBaseCode"
                    placeholder=""
                    class="miniInput"
                    default-first-option
                    filterable
                    @change="changeSelect(i.dataBaseCode,i)"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.VO"
                      v-for="item in tableColumnData"
                      :key="item.props"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select
                    v-model.lazy="i.operationSymbol"
                    placeholder=""
                    class="miniMiniInput"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.props"
                      v-for="item in jsgx"
                      :key="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="selectOptions.length > 0 || isRemote">
                  <el-select
                    v-model.lazy="i.value"
                    placeholder=""
                    class="miniMiniInput diySearch"
                    default-first-option
                    filterable
                    remote
                    :remote-method="remoteMethod"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.code"
                      v-for="item in selectOptions"
                      :key="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-else>
                  <el-input
                    v-model.lazy="i.value"
                    style="width: calc(14.5vw - 110px);"
                  ></el-input>
                </el-form-item>
                <el-form-item v-if="index === 0">
                  <el-select
                    v-model="d[0].association"
                    placeholder=""
                    class="miniMiniInput"
                    style="width: 12%;"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.props"
                      v-for="item in ljgx"
                      :key="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-else>
                  <i
                    class="el-icon-delete"
                    style="margin-left:15px;cursor:pointer;width: calc(4vw - 15px);"
                    @click="deleteMember(d, i)"
                  ></i>
                </el-form-item>
                <el-form-item>
                  <el-button type="text" :id="'zhikong_' + Index + index" style="display:none" @click="resetForm(Index,index)">置空</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="search2Visible = false">取 消</el-button>
        <el-button type="primary" @click="zdySure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import request from '@/utils/request'
export default {
  name: 'DiySearch',
  data() {
    return {
      form: [ // 自定义查询form
        [{ id: uuidv4(), dataBaseCode: '', operationSymbol: '=', association: '', value: '', idM: '', list: [] }]
      ],
      search2Visible: false,
      jsgx: [ // 计算关系
        { label: '>', props: '>' },
        { label: '>=', props: '>=' },
        { label: '<', props: '<' },
        { label: '<=', props: '<=' },
        { label: '=', props: '=' },
        { label: '!=', props: '!=' },
        { label: '包含', props: 'IN' },
        { label: '不包含', props: 'NOT IN' }
      ],
      ljgx: [// 逻辑关系
        { label: '与', props: 'AND' },
        { label: '或', props: 'OR' }
      ],
      dataBaseCode: '', // 第一个下拉框选中的字段名
      selectOptions: [], // 下拉框数据
      selectOptionsAll: [], // 全部数据
      isRemote: false // 是否处于远程搜索情况
    }
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    zdyUrl: {
      type: String,
      default: ''
    },
    id: {
      type: [String, Number],
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    tableColumnData: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    /**
     * 自定义查询确定
     */
    async zdySure() {
      this.search2Visible = false
      // 进行params的数据结构处理：几组就是几个对象，每组的第二个之后放到list里
      // [
      //   {
      //     xxx: '',
      //     list: [{}]
      //   },
      //   {
      //     xxx: '',
      //     list: [{}]
      //   }
      // ]
      const params = []
      this.form.forEach((item, index) => {
        params.push(item[0])
        params[index].list = []
        item.forEach((i, indexx) => {
          if (indexx !== 0) {
            params[index].list.push(i)
          }
        })
      })
      params[0].idM = this.id
      params[0].type = this.id
      console.log(params, 'params');
      request({
        url: this.url,
        method: 'POST',
        params
      }).then(res => {
        this.$emit('changeFdata', res.data)
        console.log(res, 'res');
      })
    },
    /**
     * 自定义查询新增小组
     */
    addGroup() {
      const params = [{ id: uuidv4(), dataBaseCode: '', operationSymbol: '=', association: '', value: '', list: [] }]
      this.form.push(params)
    },
    /**
     * 自定义查询删除小组
     */
    deleteGroup(d) {
      this.form = this.form.filter(item => {
        return item[0].id !== d[0].id
      })
      console.log(d, 'ddd');
    },
    /**
     * 自定义查询新增组内选项
     */
    addMember(d) {
      const params = { id: uuidv4(), dataBaseCode: '', operationSymbol: '=', association: 'AND', value: '', list: [] }
      d.push(params)
    },
    /**
     * 自定义查询删除组内选项
     */
    deleteMember(d, i) {
      const index1 = this.form.indexOf(d)
      const index2 = this.form[index1].indexOf(i)
      this.form[index1].splice(index2, 1)
    },
    /**
     * 重置表单
     */
    resetForm(Index, index) {
      const obj = this.form[Index][index]
      for (const key in obj) {
        obj[key] = ''
      }
    },
    /**
     * 修改下拉框数据
     */
    changeSelect(dataBaseCode, i) {
      this.dataBaseCode = dataBaseCode
      const params = { field: dataBaseCode, condition: '' }
      request({
        url: this.zdyUrl,
        method: 'GET',
        params
      }).then(res => {
        i.value = ''
        this.selectOptions = res.data
        this.isRemote = false
        this.selectOptionsAll = res.data // 将全部选项拿到
      })
    },
    /**
     * 远程搜索
     */
    remoteMethod(query) {
      this.isRemote = true
      if (query !== '') {
        const selectInput = Array.from(document.getElementsByClassName('diySearch'))
        selectInput.forEach(item => {
          item.firstElementChild.firstElementChild.value = item.firstElementChild.firstElementChild.value.toUpperCase()
        })
        const params = { field: this.dataBaseCode, condition: query.toUpperCase() }
        request({
          url: this.zdyUrl,
          method: 'GET',
          params
        }).then(res => {
          this.selectOptions = res.data
        })
      } else {
        this.selectOptions = this.selectOptionsAll;
      }
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
      column.index = columnIndex;
    },
    zhikongE(Index, index) {
      console.log('1234');
      const form = document.getElementById('zhikong_' + Index + index)
      console.log(form, 'form');
      form.style.display = 'block'
    },
    zhikongL(Index, index) {
      const form = document.getElementById('zhikong_' + Index + index)
      form.style.display = 'none'
    }
  }
};
</script>

<style lang="less" scoped>
.two_form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .two_form_f {
    width: 48%;
    margin-top: 10px;
    .two_form_form {
      display: flex;
      align-items: center;
    }
    .two_form_form_title {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #dcdfe6;
    }
  }
}
/deep/ .el-form-item--mini.el-form-item {
  margin-bottom: 10px;
  margin-top: 10px;
}
/deep/ .miniInput .el-input {
  width: 6vw;
}
/deep/ .miniMiniInput .el-input {
  width: 4vw;
}
/deep/ .el-card__body {
  padding: 0px;
} 
// table里面的输入框
/deep/ .cell .el-input--mini .el-input__inner {
    padding: 0;
    text-align: center;
}
/deep/ .el-dialog__body {
    padding: 0px 20px;
}
/deep/ .el-dialog {
  width: 70vw!important;
}
</style>
